<template>
    <div class="about">
        <div ref="chart2" style="width: 100%;height:100%;"></div>
    </div>
</template>
<script>
    import * as echarts from 'echarts'
	
    import {reactive, ref, onMounted} from 'vue'

    export default {
        // 启动函数
        setup() {
            const state = reactive({
                chart2: ref(document.getElementById('main'))

            })

            const init = () => {
                if (state.chart2) {
                    // 图表的初始化
                    let myChart = echarts.init(state.chart2)
                    const option = {
                        backgroundColor: '#2c343c',

                        title: {
                            text: '睡不着',
                            left: 'center',
                            top: 20,
                            textStyle: {
                                color: '#ccc'
                            }
                        },

                        tooltip: {
                            trigger: 'item'
                        },

                        visualMap: {
                            show: false,
                            min: 80,
                            max: 600,
                            inRange: {
                                colorLightness: [0, 1]
                            }
                        },
                        series: [
                            {
                                name: '睡不着',
                                type: 'pie',
                                radius: '55%',
                                center: ['50%', '50%'],
                                data: [
                                    {value: 335, name: '太穷'},
                                    {value: 310, name: '肚子饿了'},
                                    {value: 274, name: '有心事'},
                                    {value: 235, name: '头痛'},
                                    {value: 400, name: '床太硬'}
                                ].sort(function (a, b) { return a.value - b.value; }),
                                roseType: 'radius',
                                label: {
                                    color: 'rgba(255, 255, 255, 0.3)'
                                },
                                labelLine: {
                                    lineStyle: {
                                        color: 'rgba(255, 255, 255, 0.3)'
                                    },
                                    smooth: 0.2,
                                    length: 10,
                                    length2: 20
                                },
                                itemStyle: {
                                    color: '#c23531',
                                    shadowBlur: 200,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                },

                                animationType: 'scale',
                                animationEasing: 'elasticOut',
                                animationDelay: function (idx) {
                                    return Math.random() * 200;
                                }
                            }
                        ]
                    };
                    // 指定数据项和数据显示
                    myChart.setOption(option);
                }
            }

            onMounted(() => {
                init();
            })

            return state
        }
    }
</script>
